// 创建优惠劵信息
var couponDate = [
  {
    id: 1,
    name: "问诊无门槛优惠劵",
    money: "50.00",
    type: "好友推荐获得",
    state: "上架",
    deadline: "2022-06-07 21:00:00",
  },
  {
    id: 2,
    name: "满20元减10",
    money: "10.00",
    type: "好友推荐获得",
    state: "下架",
    deadline: "2022-10-07 21:00:00",
  },
  {
    id: 3,
    name: "问诊满50减30优惠劵",
    money: "30.00",
    type: "318活动所得",
    state: "上架",
    deadline: "2022-08-07 21:00:00",
  },
  {
    id: 4,
    name: "问诊无门槛优惠劵",
    money: "50.00",
    type: "好友推荐获得",
    state: "上架",
    deadline: "2022-08-07 21:00:00",
  },
  {
    id: 5,
    name: "问诊无门槛优惠劵",
    money: "50.00",
    type: "好友推荐获得",
    state: "上架",
    deadline: "2022-11-11 21:00:00",
  },
  {
    id: 6,
    name: "满20元减10",
    money: "10.00",
    type: "好友推荐获得",
    state: "下架",
    deadline: "2022-09-07 21:00:00",
  },
  {
    id: 7,
    name: "问诊无门槛优惠劵",
    money: "50.00",
    type: "好友推荐获得",
    state: "上架",
    deadline: "2022-08-07 21:00:00",
  },
  {
    id: 8,
    name: "满20元减10",
    money: "10.00",
    type: "好友推荐获得",
    state: "下架",
    deadline: "2022-09-07 21:00:00",
  },
  {
    id: 9,
    name: "问诊无门槛优惠劵",
    money: "50.00",
    type: "好友推荐获得",
    state: "上架",
    deadline: "2022-08-07 21:00:00",
  },
  {
    id: 10,
    name: "满20元减10",
    money: "10.00",
    type: "好友推荐获得",
    state: "下架",
    deadline: "2022-09-08 21:00:00",
  },
  {
    id: 11,
    name: "问诊满100减80优惠劵",
    money: "80.00",
    type: "318活动所得",
    state: "上架",
    deadline: "2022-11-11 24:00:00",
  },
  {
    id: 12,
    name: "问诊满100减50优惠劵",
    money: "50.00",
    type: "318活动所得",
    state: "上架",
    deadline: "2022-08-07 21:00:00",
  },
];

// 根据优惠劵的数据渲染页面

//当前的页码
var page = 1;
//每页的条数
var count = 5;
//获取tbody
var oTBody = document.querySelector("tbody");
//获取分页容器
var oPagination = document.querySelector(".pagination");
//获取向左的按钮
var goLeft = document.querySelector(".goLeft");
//获取向右的按钮
var goRight = document.querySelector(".goRight");

//获取搜索的输入框
var enterTitle = document.querySelector("#enterTitle");
var inputDate1 = document.querySelector("#inputDate1");
var inputDate2 = document.querySelector("#inputDate2");

var searchData;
// 数据渲染
/* 
当没有搜索内容时：
  一页渲染5条数据  即就是一次只遍历5个数据   
  在第一页  是从  0-4   
当有筛选内容时：
  按照筛选内容渲染
*/
// 数据渲染   优惠劵的展示   经过筛选后的展示    页码
function render() {
  //查看搜索框的内容 条件
  var str1 = enterTitle.value; //搜索的内容1
  var str2 = inputDate1.value; //搜索的内容2
  var str3 = inputDate2.value; //搜索的内容3
  searchData = []; //最终用来渲染的;
  var data1 = []; //第一个筛选框筛选后的数据
  var data2 = []; //第二个筛选框筛选后的数据
  // 判断第一个筛选框   第一个筛选框可以筛选  name money type  state
  if (str1.trim() == "") {
    // 第一个筛选框没有内容
    data1 = couponDate;
  } else {
    // filter会把couponDate中每一个数据作为参数给函数  并将符合条件的数组返回
    data1 = couponDate.filter(function (v) {
      if (
        v.name.includes(str1) ||
        v.money.includes(str1) ||
        v.type.includes(str1) ||
        v.state.includes(str1)
      ) {
        console.log(12);
        return v;
      }
    });
  }

  // 第二个、   筛选出日期 在第二个筛选框之前的数据进行渲染
  if (str2.trim() == "") {
    data2 = data1;
  } else {
    data2 = data1.filter(function (v) {
      if (v.deadline > str2) {
        console.log(13);
        return v;
      }
    });
  }
  // 第三个   筛选出日期 在第二个筛选框之后的数据进行渲染
  if (str3.trim() == "") {
    searchData = data2;
  } else {
    searchData = data2.filter(function (v) {
      if (v.deadline < str3) {
        console.log(14);
        return v;
      }
    });
  }

  // 将筛选出来的数距 添加都页面
  //让table为空
  oTBody.innerHTML = "";
  //根据count和page准备要渲染的数据
  var renderArr = searchData.slice((page - 1) * count, page * count);
  //循环要渲染的数据
  for (var i = 0; i < renderArr.length; i++) {
    //创建tr
    var oTr = document.createElement("tr");
    //给tr创建内容
    oTr.innerHTML = `
     <td><input type="checkbox" name="" id=""></td>
      <td>${renderArr[i].id}</td>
     <td>${renderArr[i].name}</td>
     <td>${renderArr[i].money}</td>
     <td>${renderArr[i].type}</td>
     <td>${renderArr[i].state}</td>
     <td>${renderArr[i].deadline}</td>
     <td><a class="editCoupon">编辑</a>
         <a class="deleteCoupon">删除</a>
     </td>
 `;
    //把tr创建到tbody里面
    oTBody.appendChild(oTr);
  }

  // 渲染页码  根据数据长度渲染页码  是5的倍数 就创建一个页码
  // 先让他为空
  var aPageBtn = document.querySelectorAll(".pageBtn");
  // 删除所有的页码
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }

  //根据数据的长度重新创建页码
  for (var i = 1; i <= Math.ceil(searchData.length / count); i++) {
    //创建li
    var oLi = document.createElement("li");
    //给li创建内容
    oLi.innerHTML = `<a class="pageBtn">${i}</a>`;
    //如果li和当前的页码一致，给他加一个选中的class
    if (i == page) {
      oLi.children[0].classList.add("activePage");
    }
    //在下一页的前面插入页码
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }

  // 更改数据总数
  // 获取标签
  // 获取数据信息
  var dataDisplay = document.querySelector(".data-display");

  dataDisplay.innerHTML = `共${Math.ceil(searchData.length / count)}页/${
    searchData.length
  }条数据`;
}

// 一开始先进行一次数据渲染  让页面有东西
render();
// 为分页加事件  即就是 点击页码  显示对应的内容 事件代理
oPagination.addEventListener("click", changePage);
function changePage() {
  if (event.target.className == "pageBtn") {
    //修改全局的page
    page = event.target.innerText;
    //渲染table，渲染分页
    render();
  }
}

// 向左  向右翻页
goLeft.addEventListener("click", leftFn);
function leftFn() {
  if (page > 1) {
    page--;
    render();
  }
}
goRight.addEventListener("click", rightFn);
function rightFn() {
  if (page < Math.ceil(searchData.length / count)) {
    page++;
    render();
  }
}

// 获取编辑页面
var editPage = document.querySelector(".edit-page");
// 获取优惠劵页面
var coupons = document.querySelector(".coupons");

// 编辑  事件委托添加
oTBody.addEventListener("click", editFn);
function editFn() {
  if (event.target.className == "editCoupon") {
    editPage.style.display = "block";
    coupons.style.display = "none";
  }
}

// 编辑页面的事件
// 获取返回按钮
var back = document.querySelector(".edit-page-title>button");
back.addEventListener("click", goBackFn);
function goBackFn() {
  coupons.style.display = "block";
  editPage.style.display = "none";
}
// 获取取消按钮
var cancelBtn = document.querySelector(".last-child .cancel");
cancelBtn.addEventListener("click", goBackFn);

// 删除
oTBody.addEventListener("click", deleteFn);
function deleteFn() {
  if (event.target.className.includes("deleteCoupon")) {
    //找到id
    var id = event.target.parentNode.parentNode.children[1].innerText;
    //循环数据对比
    for (var i = 0; i < couponDate.length; i++) {
      if (couponDate[i].id == id) {
        //删除id所对应的数据
        couponDate.splice(i, 1);
      }
    }
    //重新渲染
    render();
  }
}

// 全选功能
/* 
  全选按钮选中   上面的小按钮全选中
  全选按钮取消   上面的小按钮取消
*/
// 获取全选按钮
var couponsCheckAllInput = document.querySelector(".coupons-checkAll>input");
var couponCheckAllDiv = document.querySelector(".coupons-checkAll");

// 获取所有的小按钮
var couponCheckSmall = document.querySelectorAll(".coupon-tbody >tr>td>input");

couponCheckAllDiv.addEventListener("click", checkAllFn);
couponsCheckAllInput.addEventListener("click", checkAllFn);
function checkAllFn() {
  couponCheckSmall = document.querySelectorAll(".coupon-tbody >tr>td>input");
  // 实现点击一次选中 在点击一次取消
  if (couponsCheckAllInput.checked == false) {
    couponsCheckAllInput.checked = true;
  } else {
    couponsCheckAllInput.checked = false;
  }

  // 获取全选按钮的状态
  var checkState = couponsCheckAllInput.checked;

  for (var i = 0; i < couponCheckSmall.length; i++) {
    couponCheckSmall[i].checked = checkState;
    console.log(00);
  }
}

// 为页面中的每一个小按钮添加点击事件
/* 
    当所有的小按钮都选中时，全选按钮选中
*/
for (var i = 0; i < couponCheckSmall.length; i++) {
  couponCheckSmall[i].addEventListener("click", checkSmallFn);
}
function checkSmallFn() {
  for (var j = 0; j < couponCheckSmall.length; j++) {
    if (couponCheckSmall[j].checked == false) {
      couponsCheckAllInput.checked = false;
      return;
    }
  }
  couponsCheckAllInput.checked = true;
}

// 批量删除功能
/*
    当点击了批量删除    
    将勾选了的 tr全部删除  遍历  将勾选了的input的tr另存在一个数组里
    并删除数据
 */
// 获取批量删除
var deleteAll = document.querySelector(".deleteAll");
var deleteArr = []; //存删除的tr
var checkId = []; //存被删除的 tr 的id
deleteAll.addEventListener("click", deleteAllFn);
function deleteAllFn() {
  aCheckSmall = document.querySelectorAll("tbody >tr>td>input");
  for (var i = 0; i < aCheckSmall.length; i++) {
    if (aCheckSmall[i].checked == true) {
      deleteArr.push(aCheckSmall[i]);
    }
  }
  console.log(deleteArr);
  for (var j = 0; j < deleteArr.length; j++) {
    // 找到每一项的id  存在数组里
    checkId.push(deleteArr[j].parentNode.parentNode.children[1].innerText);
  }
  console.log(checkId);
  // 根据id删除对应的数据 然后进行数据渲染
  for (var i = 0; i < checkId.length; i++) {
    for (var j = 0; j < couponDate.length; j++) {
      if (checkId[i] == couponDate[j].id) {
        //删除id所对应的数据
        couponDate.splice(j, 1);
        couponsCheckAllInput.checked = false;
      }
    }
  }

  //重新渲染
  render();
  /* 
      清空 deleteArr = []; //存删除的tr
       checkId = []; //存被删除的 tr 的id 
  */

  deleteArr = [];
  checkId = [];
}

// 新增优惠劵功能
//获取新增优惠劵的按钮
var addCoupon = document.querySelector(".addCoupon");
addCoupon.addEventListener("click", function () {
  editPage.style.display = "block";
  coupons.style.display = "none";
});

/* 筛选功能 */
// 获取筛选按钮
var filtrateBtn = document.querySelector(".filtrateBtn");
filtrateBtn.addEventListener("click", function () {
  render();
});

/* 
  当筛选框失去焦点的时，重新渲染页面
*/
enterTitle.addEventListener("blur", function () {
  render();
});
inputDate1.addEventListener("blur", function () {
  render();
});
inputDate2.addEventListener("blur", function () {
  render();
});

/* 
   把用户新添加的东西  添加到数据中 
     1、获取用户输入的内容
     2、根据内容创建数据  加到数据末尾  前面不会加
     3、重新渲染页面
*/

/* 
  编辑页面的 选项 
*/
// 获取button 的第一个span
var selectSpan = document.querySelector("#dLabel span:first-child");
// 获取li
var selectLi = document.querySelectorAll(".dropdown-menu li");
for (var i = 0; i < selectLi.length; i++) {
  selectLi[i].addEventListener("click", selectLiFn);
}
function selectLiFn() {
  selectSpan.innerHTML = this.innerHTML;
}

/* 
  新建优惠劵   
    优惠劵名称 由 名称、使用门槛  组成。
    金额  由 优惠劵金额  定
    优惠劵类型  由  优惠劵类式组成。
    总发行量   代表创建多少个此类型的优惠劵 
*/

// 选项值

// 获取优惠劵的名称 元素
var couponName = document.querySelector(".couponName");

// 获取优惠劵描述
var couponDescribed = document.querySelector(".couponDescribed");
// 优惠劵上架
var radioRacking = document.querySelectorAll(".couponRacking");

// 优惠劵金额
var couponMoney = document.querySelector(".couponMoney");
// 截止时间
var inputDate3 = document.querySelector("#inputDate3");
// 使用门槛
var couponSill = document.querySelector(".couponSill");
// 总发行量
var couponNumber = document.querySelector(".couponNumber");

// 获取保存按钮
var keepBtn = document.querySelector(".keep");
keepBtn.addEventListener("click", keepBtnFn);
function keepBtnFn() {
  var radioRackingVal;
  // 获取radio选择
  if (radioRacking[0].checked == true) {
    radioRackingVal = radioRacking[0].value;
  } else {
    radioRackingVal = radioRacking[1].value;
  }

  var selectSpanVal = selectSpan.innerHTML;
  var couponNameVal = couponName.value;
  var couponDescribedVal = couponDescribed.value;
  var couponMoneyVal = couponMoney.value;
  // 这个插件必须用 id才取得到。
  var inputDate3Val = inputDate3.value;
  var couponSillVal = couponSill.value;
  var couponNumberVal = couponNumber.value;

  /* 
    获取现在的时分秒
    */
  var oDate = new Date();
  var time3 = oDate.toLocaleTimeString();

  // 总发行量是多少就创建多少
  // 保存创建出来的对象
  var newCouponData = [];
  for (var i = 0; i < couponNumberVal; i++) {
    var b = {
      id: couponDate.length + 1,
      name: couponNameVal + couponSillVal,
      money: couponMoneyVal,
      type: selectSpanVal,
      state: radioRackingVal,
      deadline: inputDate3Val + " " + time3,
    };
    newCouponData.push(b);
  }
  couponDate = couponDate.concat(newCouponData);
  /* 
  如果  一些必须的值为空  弹出提示
*/
  if (
    !couponNameVal ||
    !couponSillVal ||
    !couponMoneyVal ||
    !selectSpanVal ||
    !radioRackingVal ||
    !inputDate3Val
  ) {
    alert(
      "优惠劵类型、优惠劵名称、优惠劵上架、优惠劵金额、截止时间、总发行量为必填项"
    );
    return;
  }
  render();
  coupons.style.display = "block";
  editPage.style.display = "none";
}
